<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新资产</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写资产信息" icon="el-icon-edit"></el-step>
        <el-step title="最终发布" icon="el-icon-upload"></el-step>
    </el-steps>

    <el-form label-width="120px">
        <el-form-item label="资产标题">
            <el-input v-model="assetInfo.title" placeholder=" 示例：2020款惠普电脑"/>
        </el-form-item>

        <!-- 所属分类 -->
        <el-form-item label="资产分类">
            <!-- 一级分类 -->
            <el-select
                v-model="assetInfo.categoryParentId"
                placeholder="请选择" @change="categoryLevelOneChanged">
                <el-option
                    v-for="category in categoryOneList"
                    :key="category.id"
                    :label="category.title"
                    :value="category.id"
                ></el-option>
            </el-select>
            <!-- 二级分类 -->
            <el-select
                v-model="assetInfo.categoryId"
                placeholder="二级分类">
                <el-option
                    v-for="category in categoryTwoList"
                    :key="category.id"
                    :label="category.title"
                    :value="category.id"
                ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="排序">
            <el-input v-model="assetInfo.sort" />
        </el-form-item>

        <el-form-item label="残值率">
            <el-input v-model="assetInfo.netSalvage" placeholder="单位：%"/>
        </el-form-item>

        <el-form-item label="使用年限">
            <el-input v-model="assetInfo.year" placeholder="单位：年"/>
        </el-form-item>

        <el-form-item label="价格">
            <el-input v-model="assetInfo.price" placeholder="单位：元"/>
        </el-form-item>

        <el-form-item label="折旧计算方法">
            <el-select v-model="assetInfo.method">
                <el-option value="1" label="年限平均法"/>
                <el-option value="2" label="双倍余额递减法"/>
            </el-select>
        </el-form-item>

        <!-- 资产简介 -->
        <el-form-item label="资产简介">
           <tinymce :height="100" v-model="assetInfo.description"></tinymce>
        </el-form-item>

        <!-- 资产封面 -->
        <el-form-item label="资产封面">
            <el-upload
                :action="BASE_API + '/oss/fileoss'"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
                class="avatar-upload">
              <img :src="assetInfo.cover" width="400">
            </el-upload>
        </el-form-item>

        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
        </el-form-item>
    </el-form>

  </div>

</template>

<script>
import asset from '@/api/manager/asset'
import category from '@/api/manager/category'
import Tinymce from '@/components/Tinymce' 
export default {
    components:{Tinymce},
    data() {
      return {
         saveBtnDisabled: false,
        assetInfo:{
            title: '',
            categoryId: '',
            sectionId: '',
            description: '',
            cover: '/static/timg.gif',
            price: '',
            sort: 0
        },
        BASE_API: process.env.BASE_API,sectionList: [],categoryOneList:[],categoryTwoList:[]};
    },
    watch:{ $route(to,from){ this.init()
        }
    },
    created(){
        this.init()
    },
    methods: {
       init(){
               if(this.$route.params && this.$route.params.id){
                this.assetId = this.$route.params.id
               this.getInfo()
            }else{
           this.getOneCategory()
            }
        },
        getInfo(){
            asset.getAssetInfoById(this.assetId)
            .then(response =>{
                this.assetInfo = response.data.assetInfoVo
               category.getAllCategory()
                .then(response =>{
                    this.categoryOneList = response.data.list

                   for(var i =0 ; i < this.categoryOneList.length; i++){
                       var oneCategory = this.categoryOneList[i]
                       if(this.assetInfo.categoryParentId == oneCategory.id){
                           this.categoryTwoList = oneCategory.children
                        }

                    }
                })
            })
        },
       handleAvatarSuccess(res, file){
            this.assetInfo.cover = res.data.url
        },
       beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

           if(!isLt2M){
                this.$message.error('上传图片大小不能超过 2MB!')
            }
           return isLt2M
        },
       categoryLevelOneChanged(value){
            for(var i = 0; i < this.categoryOneList.length; i++){
               var oneCategory = this.categoryOneList[i]
               if(value === oneCategory.id){
                   this.categoryTwoList = oneCategory.children
                   this.assetInfo.categoryId = ''
                }
            }
        },
       getOneCategory(){
            category.getAllCategory()
                .then(response =>{
                    this.categoryOneList = response.data.list
                })
        },
       addAsset(){
            asset.addAssetInfo(this.assetInfo)
                .then(response =>{
               this.$message({
                    type:'success',
                    message: '添加成功'
                })
               this.$router.push({path:'/asset/publish/' + response.data.assetId})
            })
        },
       updateAsset(){
            asset.updateAssetInfo(this.assetInfo)
            .then(res =>{
                this.$message({
                    type:'success',
                    message: '修改成功'
                })
                this.$router.push({
                    path:'/asset/publish/' + this.assetInfo.id
                })
            })
        },
        next() {
           if(!this.assetInfo.id){
                this.addAsset()
            }else{
                this.updateAsset()
            }
        }
    }
  }
</script>

<style scoped>
.tinymce-container{
    line-height: 29px;
}
</style>
